<template>
  <div class="dashboard-editor-container">
    <a-row>
      <a-col :span="24">
        <div class="titlewrapper title">
          广铁集团土房部单身公寓管理系统
        </div>
      </a-col>
    </a-row>
    <a-row :gutter="1">
      <a-col :span="12">
        <div class="chart-wrapper">
          <pie-chart  v-bind="pieChart1"></pie-chart>
        </div>
      </a-col>
      <a-col :span="12">
        <div class="chart-wrapper">
          <pie-chart v-bind="pieChart2"></pie-chart>
        </div>
      </a-col>
    </a-row>
    <a-row :gutter="10">
      <a-col :span="8">
        <div class="chart-wrapper">
          <column-chart v-bind="columnChart1"></column-chart>
        </div>
      </a-col>
      <a-col :span="8">
        <div class="chart-wrapper">
          <column-chart v-bind="columnChart2"></column-chart>
        </div>
      </a-col>
      <a-col :span="8">
        <div class="chart-wrapper">
          <line-chart v-bind="lineChart1"></line-chart>
        </div>
      </a-col>
    </a-row>

  </div>
</template>

<script>

import ColumnChart from '@/views/dashboard/components/columnChart'
import PieChart from '@/views/dashboard/components/pieChart'
import LineChart from '@/views/dashboard/components/lineChart'

export default {
  name: 'Gro',
  components: {
    LineChart,
    PieChart,
    ColumnChart,
  },
  data() {
    return {
      columnChart1: {
        chartId: 'columnChart1',
        option: {
          color:  [
            '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
            '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
            '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
            '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
          ],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['广州', '长沙', '怀化', '惠州', '海口']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '空床位数',
              type: 'bar',
              stack: 'bed',
              emphasis: {
                focus: 'series'
              },
              data: [13646, 12834, 9864, 6260, 3586]
            },
            {
              name: '已入住床数',
              type: 'bar',
              stack: 'bed',
              emphasis: {
                focus: 'series'
              },
              data: [230, 480, 320, 330, 200]
            }
          ]
        }
      },
      columnChart2: {
        chartId: 'columnChart2',
        option : {
          color:  [
            '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
            '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
            '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
            '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
          ],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['广州', '长沙', '怀化', '惠州', '海口']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '已入住人数',
              type: 'bar',
              stack: 'bed',
              emphasis: {
                focus: 'series'
              },
              data: [13646, 12834,9654,6120,3586]
            },
            {
              name: '轮候人数',
              type: 'bar',
              stack: 'bed',
              emphasis: {
                focus: 'series'
              },
              data: [695, 520, 212, 320, 89]
            }
          ]
        }
      },
      lineChart1:{
        chartId: 'lineChart1',
        option : {
          color:  [
            '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
            '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
            '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
            '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
          ],
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            data: ['轮候人数/空床数', '总需求人数/总床位数']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['广州', '长沙', '怀化', '惠州', '海口']
          },
          yAxis: {
            type: 'value',
            scale: true,
            precision: 2,
            splitNumber: 9,
            splitArea: { show: true },
            axisLabel: {
              formatter: '{value}%'
            }
          },
          series: [
            {
              name: '轮候人数/空床数',
              type: 'line',
              data: [302.17, 108.33, 66.25, 66.97, 94.5]
            },
            {
              name: '总需求人数/总床位数',
              type: 'line',
              data: [403.35, 100.3, 96.25, 96.97, 44.5]
            }
          ]
        }
      },
      pieChart1:{
        mydata:[
          ['product', '总房数', '已入住', '可分配', '维修中'],
          ['广州', 86, 92, 85, 83],
          ['长沙', 24, 67, 79, 86],
          ['怀化', 41, 30, 65, 53],
          ['惠州', 24, 67, 79, 86],
          ['海口', 55, 67, 69, 72]
        ],
        bigtitle: 0,
        unit: 0,
        chartId: 'pie1',
        pienum: 4,
        height: '500px'
      },
      pieChart2:{
        mydata:[
          ['product', '已入住人数', '申请轮候人数', '男', '女'],
          ['广州', 120, 65, 55, 83],
          ['长沙', 24, 201, 79, 56],
          ['怀化', 41, 30, 65, 53],
          ['惠州', 43, 69, 29, 86],
          ['海口', 55, 27, 69, 72]
        ],
        bigtitle: 1,
        unit: 1,
        chartId: 'pie2',
        pienum: 4,
        height: '500px'
      },
    }
  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
  height: 100%;
  width: 100%;

}
  .title{
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    font-size: 24px;
    text-align: center;
  }
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 16px;
  }
  .titlewrapper{
    background: #fff;
    padding: 16px 16px 0;
  }
</style>
